<template>
	<view class="dynamic" @click="clickDynamic()" :adjust-position="false">

		<view class="user__container">
			<view class="user__header-warp">
				<!-- 头像组 -->
				<view class="user__header" @click.stop="clickUser()">
					<image class="user__header-image" :src="avatar" mode="aspectFill"></image>
				</view>
			</view>
			<view class="user__content">
				<view class="user__content-main">
					<text class="user__content-title nickname uni-ellipsis" style="font-size:18px;"
						@click.stop="clickUser()">{{ name }}</text>
					<text class="user__content-note uni-ellipsis">{{ timestampFormat( publishTime) }}</text>
				</view>
				<view class="user__content-extra">
					<slot>
						<!-- <text :class="isFocusOn?'user__focus-on':'user__focus-off'"
							@click.stop="clickFocus()">{{isFocusOn?'关注':'已关注' }}</text> -->
					</slot>
				</view>
			</view>
		</view>


		<view class="text">{{content}}</view>
		<view class="allImage">
			<view class="imgList">
				<view class="images" v-for="(item,index) in imgList" :key="index">
					<image @click.stop="previewImg()" class="oneimg" :src="item" mode="aspectFill"
						:style="{width:imgWidth+'px','max-height':imgHeight+'px'}"></image>
				</view>
			</view>
		</view>
		<view class="operate" :style="'width: 100%;display:'+operateDisplay">
			<uni-grid :column="3" :showBorder="false" :square="false">
				<uni-grid-item>
					<span :style="'color:'+thumbsupColor" @click.stop="clickThumbsup()">
						<uni-icons type="hand-up" size="18"
							:style="'margin-right: 2px;color:'+thumbsupColor"></uni-icons>
						{{likeNumber?likeNumber:'点赞'}}
					</span>
				</uni-grid-item>
				<!-- <uni-grid-item>
					<span :style="'color:'+heartColor" @click.stop="clickGiveReward()">
						<uni-icons type="star-filled" size="18"
							:style="'margin-right: 2px;color:'+heartColor"></uni-icons>
						{{giveRewardNumber?giveRewardNumber:'打赏'}}
					</span>
				</uni-grid-item> -->
				<uni-grid-item>
					<span style="color:gray" @click.stop="clickChat()">
						<uni-icons type="chat" size="18" style="margin-right: 2px;color:gray"></uni-icons>
						{{chatNumber?chatNumber:'评论'}}
					</span>
				</uni-grid-item>
			</uni-grid>
			
			<!-- 点赞和回复 -->
			<view class="reply-container" v-if="likes.length || reply.length">
				<!-- 点赞人 -->
				<view class="likes" v-if="likes.length">
					<text class="nickname" v-for="item in likes" :key="item._id">{{item.nickname}} ,</text>
					<text>觉得很赞</text>
				</view>
				<!-- 回复 -->
				<view class="reply" v-for="item in reply" :key="item._id" @click="replys(item)">
					<text>
						<text class="nickname">{{item.replyNickname}}</text>
						<!-- 如果回复者的unid和发布者的unid不相同,就显示谁回复了谁 -->
						<!-- 2. 后续把item.targetNickname的判断条件换成 item.target_unid!=currentItem.unid -->
						<!-- 3 .后续把item.targetNickname的判断条件换成 item.reply_unid!=item..target_unid -->
						<text
							v-if="item.reply_unid!=currentItem.unid && item.targetNickname!=currentItem.nickname & item.replyNickname!=item.targetNickname">
							回复
							<text class="nickname">{{item.targetNickname}}</text>
						</text>
						:
						&nbsp
					</text>
					<text>
						{{item.content}}
					</text>
				</view>
			</view>
		</view>
		<view class="bottom-line"></view>
	</view>
</template>

<script>
	export default {
		props: {
			//登入用户的unid
			current_unid: {
				type: String,
				default () {
					return ""
				}
			},
			//头像
			avatar: {
				type: String
			},
			//用户昵称
			name: {
				type: String
			},
			//发布时间
			publishTime: {

			},
			isFocusOn: {
				type: Boolean
			},
			//评论内容
			content: {
				type: String
			},
			//回复内容
			reply: {
				type: Array,
				default () {
					return []
				}
			},
			//点赞数据
			likes: {
				type: Array,
				default () {
					return []
				}
			},
			currentItem: {
				type: Object,
				default () {
					return {}
				}
			},
			imgList: {
				type: Array,
				default () {
					return []
				}
			},
			isLike: {
				type: Boolean
			},
			isGiveReward: {
				type: Boolean
			},
			likeNumber: {
				type: Number
			},
			giveRewardNumber: {
				type: Number
			},
			chatNumber: {
				type: Number
			},
			userNoShow: {
				type: Boolean
			},
			operateNoShow: {
				type: Boolean
			}
		},
		data() {
			return {
				windowWidth: 0, //屏幕可用宽度
				windowHeight: 0, //屏幕可用高度
				imgWidth: 0, //图片宽度
				imgHeight: 0, //图片高度
				thumbsupColor: 'gray',
				heartColor: 'gray',
				userDisplay: 'block',
				operateDisplay: 'block',
			}
		},
		mounted() {
			// console.log(this.reply)
			const res = uni.getSystemInfoSync();
			this.windowHeight = res.windowHeight;
			this.windowWidth = res.windowWidth;

			if (this.userNoShow) {
				this.userDisplay = 'none';
			}
			// console.log(this.operateNoShow);
			if (this.operateNoShow) {
				this.operateDisplay = 'none';
			}

			this.judgeImg();
			this.initOperate();
		},
		methods: {
			replys(replyItem) {
				//触发回复的方法
				this.$emit("reply", replyItem)
			},
			// 预览图片
			previewImg() {
				uni.previewImage({
					urls: this.imgList,
					longPressActions: {
						itemList: ['保存图片'],

					}
				})
			},
			initOperate() {
				if (this.isLike) this.thumbsupColor = '#fb5f5f';
				if (this.isGiveReward) this.heartColor = '#fb5f5f';
			},
			// 自适应判断
			judgeImg() {
				// console.log(this.imgList)
				if (this.imgList.length == 1) {
					this.imgWidth = this.windowWidth * 2 / 3;
					this.imgHeight = this.windowHeight * 3 / 5;
				} else if (this.imgList.length == 4) {
					this.imgWidth = this.windowWidth / 3.3;
					this.imgHeight = this.imgWidth;
				} else {
					this.imgWidth = this.windowWidth / 3.4;
					this.imgHeight = this.imgWidth;
				}
			},
			timestampFormat(dateTimeStamp) {
				if (!dateTimeStamp) return '';
				if (typeof dateTimeStamp == "string") dateTimeStamp = +new Date(dateTimeStamp);
				let result;
				//JavaScript函数：
				var minute = 1000 * 60;
				var hour = minute * 60;
				var day = hour * 24;
				var halfamonth = day * 15;
				var month = day * 30;

				var now = new Date().getTime();
				var diffValue = now - dateTimeStamp;
				if (diffValue < 0) {
					//若日期不符则弹出窗口告之
					//alert("结束日期不能小于开始日期！");
				}
				var monthC = diffValue / month;
				var weekC = diffValue / (7 * day);
				var dayC = diffValue / day;
				var hourC = diffValue / hour;
				var minC = diffValue / minute;
				if (monthC >= 1) {
					result = "发布于" + parseInt(monthC) + "个月前";
				} else if (weekC >= 1) {
					result = "发布于" + parseInt(weekC) + "周前";
				} else if (dayC >= 1) {
					result = "发布于" + parseInt(dayC) + "天前";
				} else if (hourC >= 11) {
					result = "发布于" + (new Date().toLocaleString())
				} else if (hourC >= 1) {
					result = "发布于" + parseInt(hourC) + "个小时前";
				} else if (minC >= 1) {
					result = "发布于" + parseInt(minC) + "分钟前";
				} else {
					result = "刚刚发布";
				}
				return result;


			},

			/** 触发父级事件 */
			// 点击动态
			clickDynamic() {
				this.$emit('clickDynamic');
			},
			// 点击用户信息
			clickUser() {
				this.$emit('clickUser');
			},
			// 点击关注
			clickFocus() {
				this.$emit('clickFocus');
			},
			// 点赞
			clickThumbsup() {
				this.$emit('handlike', this.currentItem?.commentid);
			},
			// 点击打赏
			clickGiveReward() {
				this.$emit('clickGiveReward');
			},
			// 点击聊天
			clickChat() {
				this.$emit('start-write-comment', this.currentItem);
			}
		}
	}
</script>

<style scoped lang="scss">
	.reply-container {
		// width:700rpx;
		box-sizing: border-box;
		background-color: #EAECEF;
		margin-top:5px;
		padding:10px 30rpx;
	}
	.reply {
	
		min-height: 20px;
		
		/* background-color:red; */
		font-size: 16px;
		
		margin-top: 5px;

	}

	.reply text {
		color: #000;
	}

	.nickname {
		color: #576b95 !important;
	}

	/* 想法图片排列样式 */
	.uni-list-chat__content-extra-text {
		color: #007AFF;
	}

	.dynamic {
		width: 100%;
	}

	.allImage {
		display: flex;
		margin-top: 10rpx;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.imgList {
		margin: 0 3%;
	}

	.images:not(:nth-child(3n)) {
		/* margin-right: 10rpx; */
	}

	.text {
		margin: 1% 3% 2%;
		font-size: 22px;
	}

	.images {
		margin-right: 10rpx;
		display: inline-block;
	}

	.operate {
		width: 94%;
		padding: 3%;
		font-size: 14px;
	}

	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 12px;
		color: #999;
	}

	.bottom-line {
		border-bottom: 10px solid #efefef;
	}


	.user__container {
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		/* -webkit-flex-direction: row; */
		flex-direction: row;
		-webkit-box-flex: 1;
		/* -webkit-flex: 1; */
		flex: 1;
		padding: 10px 15px;
		position: relative;
		overflow: hidden;
	}

	.user__header {
		display: flex;
		width: 100rpx;
		height: 50px;
		-webkit-border-radius: 5px;
		border-color: #eee;
		border-width: 1px;
		border-style: solid;
		overflow: hidden;
		/* border-radius: 50px; */
	}

	.user__header-image {
		display: flex;
		align-content: center;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		-webkit-box-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		align-items: center;
		flex-wrap: wrap-reverse;
		width: 100%;
		height: 100%;
		border-radius: 5px;
		border-color: #eee;
		border-width: 1px;
		border-style: solid;
		overflow: hidden;
	}

	.user__content {
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		-webkit-box-flex: 1;
		flex: 1;
		overflow: hidden;
		padding: 2px 0;
	}

	.user__content-main {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		padding-left: 10px;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		overflow: hidden;
	}

	.user__content-note {
		margin-top: 3px;
		color: #999;
		font-size: 12px;
		font-weight: normal;
		overflow: hidden;
	}

	.user__focus-on {
		padding: 3px 10px;
		border: 1px solid #fb5f5f;
		color: #fb5f5f;
		display: flex;
		font-size: 14px;
		border-radius: 3px;
	}

	.user__focus-off {
		padding: 3px;
		color: gray;
		font-size: 14px;
	}
</style>